<template>
  <!-- 数据列表 -->
  <el-card shadow="always">
    <div class="data-list">
      <div class="left">
        <el-icon size="16">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right">
        <el-button type="primary" @click="addlist(0, null)">添加</el-button>
      </div>
    </div>
  </el-card>
  <!-- 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData.list"
    style="width: 100%"
    :border="true"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="编号" width="55" />
    <el-table-column prop="name" label="属性名称" />
    <el-table-column label="商品类型">
      <template #default="scope">
        {{ listaat.name }}
      </template>
    </el-table-column>

    <el-table-column prop="selectType" label="属性是否可选">
      <template #default="scope">
        <div v-if="scope.row.selectType === 0">唯一</div>
        <div v-else-if="scope.row.selectType === 1">单选</div>
        <div v-else>多选</div>
      </template>
    </el-table-column>
    <el-table-column label="属性值的录入方式">
      <template #default="scope">
        {{ scope.row.inputType === 0 ? "手工录入" : "从列表中选取" }}
      </template>
    </el-table-column>

    <el-table-column prop="inputList" label="可选值列表" />
    <el-table-column prop="sort" label="排序" />
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" @click="addlist(1, scope.row.id)"
          >编辑</el-button
        >
        <el-button type="danger" @click="deleet(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="foot">
    <div style="display: flex; margin-top: 23px">
      <el-form-item>
        <el-select v-model="a.aslist" placeholder="批量操作">
          <el-option
            v-for="item in Operationstatus"
            label="批量删除"
            :value="item"
          />
        </el-select>
      </el-form-item>
      &nbsp;
      <el-form-item>
        <template #default="scope">
          <el-button type="primary" @click="deleetlist">确定</el-button>
        </template>
      </el-form-item>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="tableData.pageNum"
      v-model="tableData.pageSize"
      :page-sizes="[1, 5, 10, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, Ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import type {
  productAttrItem,
  productAttrParams,
  productAttrRes,
} from "../../request/brand";

let route = useRoute();
let router = useRouter();
let listaat = route.query;
let listtype = Number(listaat.type);

let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  totalPage: 0,
});
let a = reactive({
  aslist: "",
});
//选择操作状态
let Operationstatus = [0];
//id数组
let ids = ref([]) as Ref<number | number[]>;

// interface.
//获取到id
let handleSelectionChange = (val: any) => {
  console.log(val);
  let a = val.map((item) => {
    return item.id;
  });
  console.log(a);
  ids.value = a;

  console.log(ids.value);
  // // console.log(ids.value.toString());
  // //转为字符串
  ids.value = ids.value.toString();
  // console.log(ids);
};
//批量删除
let deleetlist = async () => {
  if (a.aslist === 0) {
    await api.productAttr.productAttributedelete(ids.value);
    getclassify();
  }
};
//请求
let getclassify = async () => {
  let atv = await api.productAttr.getclassifyproductAttributelist({
    cid: Number(listaat.cid),
    pageNum: 1,
    pageSize: 10,
    type: listtype,
  });
  // console.log(atv);
  tableData.list = atv.list;
  tableData.pageNum = atv.pageNum;
  tableData.pageSize = atv.pageSize;
  tableData.total = atv.total;
  tableData.totalPage = atv.totalPage;
};
getclassify();
// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
  // console.log(val);
  tableData.pageSize = val;
  getclassify();
};

// 改变当前页数
let handleCurrentChange = (val: number) => {
  // console.log(val);
  tableData.pageNum = val;
  getclassify();
};
//添加
let addlist = (i: number, zid: number) => {
  console.log(i);
  console.log(zid);
  // //修改
  if (i === 1) {
    router.push({
      path: "/pms/addProductAttr",
      query: {
        cid: Number(zid),
        scid: Number(listaat.cid),
        type: i,
      },
    });
    return;
  }
  router.push({
    path: "/pms/productAdd",
    query: {
      cid: Number(listaat.cid),
      scid: Number(listaat.cid),
      type: i,
    },
  });
};

//删除
let deleet = async (data: any) => {
  // console.log(a.aslist);
  // console.log(data);
  ids.value = data.id;

  console.log(data);
  await api.productAttr.productAttributedelete(data.id);
  getclassify();
};
</script>

<style lang="scss" scoped>
.data-list {
  display: flex;
  justify-content: space-between;
}

.el-card {
  margin-bottom: 20px;
}

.foot {
  display: flex;
  justify-content: space-between;
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
